<template>
  <div>
    <div>
      <div class="myselect">
        <label for="">请选择：</label>
        <el-select v-model="mySe" placeholder="请选择要统计的表">
          <el-option label="工作效率情况表" value="工作效率情况表"></el-option>
          <el-option label="管理质量情况表" value="管理质量情况表"></el-option>
          <el-option label="治疗质量情况表" value="治疗质量情况表"></el-option>
        </el-select>
        <el-select v-model="myKeshi" placeholder="请选择要统计的表">
          <el-option label="内科" value="内科"></el-option>
          <el-option label="外科" value="外科"></el-option>
        </el-select>
        <el-select v-model="seDate" placeholder="请选择要统计的时间方式">
          <el-option label="月" value="月"></el-option>
          <el-option label="季" value="季"></el-option>
          <el-option label="年" value="年"></el-option>
        </el-select>
        <el-date-picker v-if="seDate == '月'" type="year" placeholder="选择日期" v-model="myDateyue"></el-date-picker>
        <el-select v-if="seDate == '月'" v-model="myDate" placeholder="请选择要统计的时间">
          <el-option label="1月" value="01"></el-option>
          <el-option label="2月" value="02"></el-option>
          <el-option label="3月" value="03"></el-option>
          <el-option label="4月" value="04"></el-option>
          <el-option label="5月" value="05"></el-option>
          <el-option label="6月" value="06"></el-option>
          <el-option label="7月" value="07"></el-option>
          <el-option label="8月" value="08"></el-option>
          <el-option label="9月" value="09"></el-option>
          <el-option label="10月" value="10"></el-option>
          <el-option label="11月" value="11"></el-option>
          <el-option label="12月" value="12"></el-option>
        </el-select>
        <el-date-picker v-if="seDate == '季'" type="year" placeholder="选择日期" v-model="myDateJi"></el-date-picker>
        <el-select v-if="seDate == '季'" v-model="myDate" placeholder="请选择要统计的时间">
          <el-option label="第一季度" value="1"></el-option>
          <el-option label="第二季度" value="2"></el-option>
          <el-option label="第三季度" value="3"></el-option>
          <el-option label="第四季度" value="4"></el-option>
        </el-select>
        <el-date-picker v-if="seDate == '年'" type="year" placeholder="选择日期" v-model="myDate"></el-date-picker>
      </div>
    </div>
    <el-button type="primary" round @click="selectTj">查询</el-button>
    <div class="myApp">
      <h1>{{ myTitle }}</h1>
      <h5>{{ myKeshiTi }}</h5>
      <h5>{{ myNowDateShow }}</h5>
      <!-- <div>
        <label for="">平均住院天数：</label>
        <span>{{ averageTime }}天</span>
      </div> -->
      <div id="main"></div>
    </div>
  </div>
</template>
<script>
import tishi from '../../../mixins/tishi';
import { mapActions } from 'vuex';

export default {
  mixins: [tishi],

  // watch: {
  //   myData: function(myData) {
  //     this.zhuanhuan(this.myAllData);
  //   },
  // },
  created() {
    let nextMonth = new Date();
    // console.log(this.padDate(nextMonth.getMonth()));
    // console.log(nextMonth.getFullYear());
    let val = `${nextMonth.getFullYear()}-${this.padDate(nextMonth.getMonth())}`;
    this.seleInitial({ dateTime: val });
  },
  data() {
    return {
      mySe: '',
      seDate: '',
      myDate: '',
      // myTitle: '',
      myTitle: '工作效率情况表',
      myKeshiTi: '内科',
      myNowDate: '2021-05',
      myKeshi: '',
      myDateJi: '',
      myDateyue: '',
      myData: [2, 3, 4, 5, 6, 7],
      myDataName: ['治愈率', '好转率', '未愈率', '未治率', '死亡率', '其他'],
      myAllData: {},
      averageTime: '',
      myNowDateShow: '',
    };
  },
  methods: {
    ...mapActions(['tongyong']),
    seleInitial(data) {
      this['tongyong']({
        name: 'SELECT_TONGJIGZYUE',
        data: data,
      }).then(resp => {
        if (resp.data.code == 200) {
          this.myTitle = '工作效率情况表';
          this.myDataName = ['治愈率', '好转率', '未愈率', '未治率', '死亡率', '其他'];
          // this.myNowDateShow = this.myNowDate;
          this.myNowDateShow = data.dateTime;
          resp.data.data.forEach(element => {
            // console.log(element.department);
            if (element.department == '内科') {
              this.myAllData = { ...element };
            }
          });
          this.zhuanhuan(this.myAllData);
          this.drawChart();
        }
        if (resp.data.code == 1001) {
          this.$message({
            type: 'error',
            message: '暂无数据',
          });
        }
      });
    },
    zhuanhuan(data) {
      this.myData = [];
      for (const key in data) {
        if (Object.hasOwnProperty.call(data, key)) {
          if (key != 'department' && key != 'averageTime') {
            this.myData.push(data[key] * 100);
          }
          if (key == 'averageTime') {
            this.averageTime = data[key];
          }
        }
      }
    },
    tongjiGzJidu(data) {
      this['tongyong']({
        name: 'SELECT_TONGJIGZJIDU',
        data: data,
      }).then(resp => {
        if (resp.data.code == 200) {
          this.myTitle = '工作效率情况表';
          this.myDataName = ['治愈率', '好转率', '未愈率', '未治率', '死亡率', '其他'];
          this.myNowDateShow = this.myNowDate;
          resp.data.data.forEach(element => {
            console.log(element.department);
            if (element.department == this.myKeshi) {
              this.myAllData = { ...element };
            }
          });
          this.zhuanhuan(this.myAllData);
          this.drawChart();
        }
        if (resp.data.code == 1001) {
          this.$message({
            type: 'error',
            message: '暂无数据',
          });
        }
      });
    },
    tongjiGzYue(data) {
      console.log(data);
      this['tongyong']({
        name: 'SELECT_TONGJIGZYUE',
        data: data,
      }).then(resp => {
        if (resp.data.code == 200) {
          this.myTitle = '工作效率情况表';
          this.myDataName = ['治愈率', '好转率', '未愈率', '未治率', '死亡率', '其他'];
          this.myNowDateShow = this.myNowDate;
          resp.data.data.forEach(element => {
            console.log(element.department);
            if (element.department == this.myKeshi) {
              this.myAllData = { ...element };
            }
          });
          this.zhuanhuan(this.myAllData);
          this.drawChart();
        }
        if (resp.data.code == 1001) {
          this.$message({
            type: 'error',
            message: '暂无数据',
          });
        }
      });
    },
    tongjiGlJidu(data) {
      this['tongyong']({
        name: 'SELECT_TONGJIGlJIDU',
        data: data,
      }).then(resp => {
        if (resp.data.code == 200) {
          this.myTitle = '管理质量情况表';
          this.myDataName = ['并发症发生率', '感染率', '甲级病案率'];
          this.myNowDateShow = this.myNowDate;
          resp.data.data.forEach(element => {
            console.log(element.department);
            if (element.department == this.myKeshi) {
              this.myAllData = { ...element };
            }
          });
          this.zhuanhuan(this.myAllData);
          this.drawChart();
        }
        if (resp.data.code == 1001) {
          this.$message({
            type: 'error',
            message: '暂无数据',
          });
        }
      });
    },
    tongjiGlYue(data) {
      this['tongyong']({
        name: 'SELECT_TONGJIGlYUE',
        data: data,
      }).then(resp => {
        if (resp.data.code == 200) {
          this.myTitle = '管理质量情况表';
          this.myDataName = ['并发症发生率', '感染率', '甲级病案率'];
          this.myNowDateShow = this.myNowDate;
          resp.data.data.forEach(element => {
            console.log(element.department);
            if (element.department == this.myKeshi) {
              this.myAllData = { ...element };
            }
          });
          this.zhuanhuan(this.myAllData);
          this.drawChart();
        }
        if (resp.data.code == 1001) {
          this.$message({
            type: 'error',
            message: '暂无数据',
          });
        }
      });
    },
    tongjiZlJidu(data) {
      this['tongyong']({
        name: 'SELECT_TONGJIZlJIDU',
        data: data,
      }).then(resp => {
        if (resp.data.code == 200) {
          this.myTitle = '治疗质量情况表';
          this.myDataName = ['好转率', '成功率'];
          this.myNowDateShow = this.myNowDate;
          resp.data.data.forEach(element => {
            console.log(element.department);
            if (element.department == this.myKeshi) {
              this.myAllData = { ...element };
            }
          });
          this.zhuanhuan(this.myAllData);
          console.log(this.myAllData);
          this.drawChart();
        }
        if (resp.data.code == 1001) {
          this.$message({
            type: 'error',
            message: '暂无数据',
          });
        }
      });
    },
    tongjiZlYue(data) {
      this['tongyong']({
        name: 'SELECT_TONGJIZlYUE',
        data: data,
      }).then(resp => {
        if (resp.data.code == 200) {
          this.myTitle = '治疗质量情况表';
          this.myDataName = ['好转率', '成功率'];
          this.myNowDateShow = this.myNowDate;
          resp.data.data.forEach(element => {
            console.log(element.department);
            if (element.department == this.myKeshi) {
              this.myAllData = { ...element };
            }
          });
          this.zhuanhuan(this.myAllData);
          this.drawChart();
        }
        if (resp.data.code == 1001) {
          this.$message({
            type: 'error',
            message: '暂无数据',
          });
        }
      });
    },
    selectTj() {
      if (this.mySe == '工作效率情况表') {
        if (this.seDate == '月') {
          this.myDateyue = this.changetime(this.myDateyue);
          this.myNowDate = this.myDateyue + '-' + this.myDate;
          console.log(this.myNowDate);
          this.tongjiGzYue({ dateTime: this.myNowDate });
        }
        if (this.seDate == '季') {
          this.myDateJi = this.changetime(this.myDateJi);
          let startTime = '';
          let endTime = '';
          if (this.myDate == 1) {
            this.myNowDate = this.myDateJi + '第一季度';
            startTime = this.myDateJi + '-' + '01' + '-' + '01';
            endTime = this.myDateJi + '-' + '03' + '-' + '01';
            this.tongjiGzJidu({
              startTime,
              endTime,
            });
          }
          if (this.myDate == 2) {
            this.myNowDate = this.myDateJi + '第二季度';
            // startTime =;
            // endTime = this.myDateJi + '-' + '06' + '-' + '01';
            this.tongjiGzJidu({
              startTime: this.myDateJi + '-' + '04' + '-' + '01',
              endTime: this.myDateJi + '-' + '06' + '-' + '01',
            });
          }
          if (this.myDate == 3) {
            this.myNowDate = this.myDateJi + '第三季度';
            startTime = this.myDateJi + '-' + '07' + '-' + '01';
            endTime = this.myDateJi + '-' + '09' + '-' + '01';
            this.tongjiGzJidu({
              startTime,
              endTime,
            });
          }
          if (this.myDate == 4) {
            this.myNowDate = this.myDateJi + '第四季度';
            startTime = this.myDateJi + '-' + '10' + '-' + '01';
            endTime = this.myDateJi + '-' + '12' + '-' + '01';
            this.tongjiGzJidu({
              startTime,
              endTime,
            });
          }
        }
        if (this.seDate == '年') {
          this.myDate = this.changetime(this.myDate);
          this.myNowDate = this.myDate;
          console.log(this.myDate);
          this.tongjiGzYue({ dateTime: this.myDate });
        }
      }
      if (this.mySe == '管理质量情况表') {
        if (this.seDate == '月') {
          this.myDateyue = this.changetime(this.myDateyue);
          this.myNowDate = this.myDateyue + '-' + this.myDate;
          console.log(this.myNowDate);
          this.tongjiGlYue({ dateTime: this.myNowDate });
        }
        if (this.seDate == '季') {
          this.myDateJi = this.changetime(this.myDateJi);
          let startTime = '';
          let endTime = '';
          if (this.myDate == 1) {
            this.myNowDate = this.myDateJi + '第一季度';
            startTime = this.myDateJi + '-' + '01' + '-' + '01';
            endTime = this.myDateJi + '-' + '03' + '-' + '01';
            this.tongjiGlJidu({
              startTime,
              endTime,
            });
          }
          if (this.myDate == 2) {
            this.myNowDate = this.myDateJi + '第二季度';
            startTime = this.myDateJi + '-' + '04' + '-' + '01';
            endTime = this.myDateJi + '-' + '06' + '-' + '01';
            this.tongjiGlJidu({
              startTime,
              endTime,
            });
          }
          if (this.myDate == 3) {
            this.myNowDate = this.myDateJi + '第三季度';
            startTime = this.myDateJi + '-' + '07' + '-' + '01';
            endTime = this.myDateJi + '-' + '09' + '-' + '01';
            this.tongjiGlJidu({
              startTime,
              endTime,
            });
          }
          if (this.myDate == 4) {
            this.myNowDate = this.myDateJi + '第四季度';
            startTime = this.myDateJi + '-' + '10' + '-' + '01';
            endTime = this.myDateJi + '-' + '12' + '-' + '01';
            this.tongjiGlJidu({
              startTime,
              endTime,
            });
          }
        }
        if (this.seDate == '年') {
          this.myDate = this.changetime(this.myDate);
          this.myNowDate = this.myDate;
          console.log(this.myDate);
          this.tongjiGlYue({ dateTime: this.myDate });
        }
      }
      if (this.mySe == '治疗质量情况表') {
        if (this.seDate == '月') {
          this.myDateyue = this.changetime(this.myDateyue);
          this.myNowDate = this.myDateyue + '-' + this.myDate;
          this.tongjiZlYue({ dateTime: this.myNowDate });
        }
        if (this.seDate == '季') {
          this.myDateJi = this.changetime(this.myDateJi);
          let startTime = '';
          let endTime = '';
          if (this.myDate == 1) {
            this.myNowDate = this.myDateJi + '第一季度';
            startTime = this.myDateJi + '-' + '01' + '-' + '01';
            endTime = this.myDateJi + '-' + '03' + '-' + '01';
            this.tongjiZlJidu({
              startTime,
              endTime,
            });
          }
          if (this.myDate == 2) {
            this.myNowDate = this.myDateJi + '第二季度';
            startTime = this.myDateJi + '-' + '04' + '-' + '01';
            endTime = this.myDateJi + '-' + '06' + '-' + '01';
            this.tongjiZlJidu({
              startTime,
              endTime,
            });
          }
          if (this.myDate == 3) {
            this.myNowDate = this.myDateJi + '第三季度';
            startTime = this.myDateJi + '-' + '07' + '-' + '01';
            endTime = this.myDateJi + '-' + '09' + '-' + '01';
            this.tongjiZlJidu({
              startTime,
              endTime,
            });
          }
          if (this.myDate == 4) {
            this.myNowDate = this.myDateJi + '第四季度';
            startTime = this.myDateJi + '-' + '10' + '-' + '01';
            endTime = this.myDateJi + '-' + '12' + '-' + '01';
            this.tongjiZlJidu({
              startTime,
              endTime,
            });
          }
        }
        if (this.seDate == '年') {
          this.myDate = this.changetime(this.myDate);
          this.myNowDate = this.myDate;
          console.log(this.myDate);
          this.tongjiZlYue({ dateTime: this.myDate });
        }
      }
    },
    padDate(value) {
      return value < 10 ? '0' + value : value;
    },
    changetime(value) {
      let date = new Date(value);
      let year = date.getFullYear();
      return `${year}`;
    },
    drawChart() {
      let myChart = this.$echarts.init(document.getElementById('main'));
      // var option;
      // 指定图表的配置项和数据
      this.option = {
        tooltip: {
          trigger: 'item',
          formatter: '{c}%',
        },
        xAxis: {
          type: 'category',
          data: this.myDataName,
          axisLabel: {
            interval: 0,
            rotate: 0,
          },
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            show: true,
            // showMinLabel: true,
            interval: 'auto',
            formatter: '{value} %',
          },
        },
        series: [
          {
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: 'top',
                  formatter: '{b}\n{c}%', //这是关键，在需要的地方加上就行了
                },
              },
            },
            data: this.myData,
            type: 'bar',
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      this.option && myChart.setOption(this.option);
    },
  },
  mounted() {
    // this.drawChart();
  },
};
</script>
<style lang="less" scoped>
#main {
  margin: 0 auto;
  width: 600px;
  height: 600px;
}
.myselect {
  // width: 75%;
  display: inline-block;
  margin-bottom: 20px;
}
.myApp {
  text-align: center;
}
</style>
